<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="懒加载 首屏加载">
    <meta name="description" content="实现图片懒加载来提升前端性能">
    <title>xxxx</title>
    <style>
        li {
            list-style: none;
        }

        img {
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://profile.csdnimg.cn/0/F/A/3_weixin_41937552"></li>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://profile.csdnimg.cn/3/6/E/3_u010064074"></li>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://img-home.csdnimg.cn/images/20210401084958.png"></li>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://img-bss.csdn.net/1617152733619.jpg"></li>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://avatars.githubusercontent.com/u/12641449?v=4"></li>
        <li><img src="https://profile.csdnimg.cn/0/7/9/0_weixin_49409651"
                data-src="https://avatars.githubusercontent.com/u/12641449?v=4"></li>
    </ul>
    <script>
        class LazyLoad {
            constructor() {
                let oImg = document.querySelectorAll('img'),
                    len = oImg.length;
                this.len = len;
                this.oImg = oImg;
                this.config = {
                    h: window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight,
                    w: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth
                }
                this.timer = null;
                this.delay()
            }
            delay() {
                this.timer && clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.run()
                }, 500)
            }
            run() {
                let item = null, obj = null;
                const { h } = this.config;
                console.log('ok');
                for (let i = 0; i < this.len; i++) {
                    item = this.oImg[i];
                    obj = this.getOffset(item);
                    if ((obj.bottom > 0 && obj.bottom < h) || (obj.top > 0 && obj.top < h)) {

                        item.src = item.getAttribute('data-src')
                    }
                };
            }
            getOffset(obj) {
                const bottom = obj.getBoundingClientRect().bottom;
                const top = obj.getBoundingClientRect().top;
                return {
                    bottom,
                    top
                }
            }
        }
        if (navigator.onLine) {
            const lazy = new LazyLoad();
            window.onload = window.onscroll = function () {
                lazy.delay()
            }

        } else {
            const oDiv = document.createElement('div');
            oDiv.innerHTML = '请检查网络'
            document.body.appendChild(oDiv)
        }
    </script>


</body>

</html>